<template>
  <div class="_mbbox boxgap">
    <div class="nbox1 select_gap">
      <n-select
        :options="sval.season_list"
        :value="sval.season_click"
        @update:value="set.sl_click"
      />
      <n-input placeholder="公会名称" v-model:value="val.sea_guild" @input="set.seasub" />
      <n-input
        placeholder="成员名称"
        v-model:value="val.sea_username"
        @input="set.seasub"
      />
    </div>
    <div class="nbox1">
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div>-</div>
      </div>
      <div class="guild_gap">
        <div v-for="item in val.data" class="guildbox">
          <div class="_gname">{{ item.guild_name }}</div>
          <div class="_font">伤害（{{ item.mcdmg?.toLocaleString() }}）</div>
        </div>
      </div>
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div>-</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
._font {
  font-size: 0.9em;
  color: var(--base-font-hover-color);
  text-shadow: 0 0 3px #000;
}
._gname {
  font-size: 1.1em;
  color: var(--text-color);
  text-shadow: 0 0 3px #000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.2em;
}
.guild_gap {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.guildbox {
  cursor: pointer;
  display: flex;
  padding: 0.5em;
  border-radius: 0.25em;
  position: relative;
  background: var(--nbox3);
  transition: 0.2s ease-in-out;
  align-items: center;
  gap: 0.35em;
  height: 100%;
  flex-direction: column;
  min-height: 8em;
  justify-content: center;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      page: (page) => {
        val.page = page;
        set.get_list();
      },
      seasub: () => {
        set.get_list();
      },
      get_list: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/guild`,
            query: {
              type: "get_guild_list",
              seaname: val.sea_guild,
              seausername: val.sea_username,
              page: val.page,
            },
          });
          if (back.code == 0) {
            val.data = back.data.data;
            val.maxpage = back.data.maxpage;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          cfg.alert3({
            message: e.message,
          });
        }
      },
    };
    const val = reactive({
      page: 1,
      data: [],
      sea_username: cfg.route.query.sea_user ?? null,
      sea_guild: cfg.route.query.sea_guild ?? null,
    });
    onMounted(async () => {
      await set.get_list();
    });
    return { sval, cfg, set, val };
  },
};
</script>
